<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%--引入vue的js--%>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <%--引入element的js--%>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="/js/axios.min.js"></script>
    <%--引入elementui的样式--%>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {

        width: 178px;
        height: 178px;
        display: block;
    }
</style>
<body>
<div id="app">
    <el-form :model="addForm" >
    <el-form-item label="图书图片" :label-width="80+''" prop="myfile" >
        <el-upload
                class="avatar-uploader"
                action="/upLoad/image"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>

    </el-form-item>
    </el-form>




</div>
<script>
   let vm=new Vue({
       el:"#app",
       data: {
           addForm:{},
           imageUrl: ''

       },
       methods: {
           handleAvatarSuccess(res, file) {
               console.log("上传图片成功")
               console.log(res)
               this.imageUrl = URL.createObjectURL(file.raw);
           },
           beforeAvatarUpload(file) {
               const isJPG = file.type === 'image/jpeg';
               const isLt2M = file.size / 1024 / 1024 < 2;

               if (!isJPG) {
                   this.$message.error('上传头像图片只能是 JPG 格式!');
               }
               if (!isLt2M) {
                   this.$message.error('上传头像图片大小不能超过 2MB!');
               }
               return isJPG && isLt2M;
           }

       }
   })
</script>
</body>
</html>
